<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-if控制的是元素的显示和隐藏 -->
      <!-- 可以写变量或者表达式 -->
      <!-- <h1 v-if="awesome === 1">Vue is awesome!</h1> -->

      <!-- v-else必须要紧挨着v-if的标签 -->
      <!-- <h1 v-if="awesome">Vue is awesome!</h1>
      <h1 v-else>Oh no 😢</h1> -->

      <!-- v-else-if也是需要条件的, 也必须要紧挨着v-if的标签 -->
      <!-- <div v-if="type === 'A'">A</div>
      <div v-else-if="type === 'B'">B</div>
      <div v-else>C</div> -->

      <!-- template是vue内置的标签，相当于一个空的占位标签 -->
      <template v-if="show">
        <h1>Vue is awesome!</h1>
        <p>this is content</p>
      </template>
      <!-- <template v-else> </template> -->
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            awesome: false,
            type: "A",
            show: false,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
